<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户授权登陆-Oauth2.0</title>
</head>

<body>
<div class="container">
    <div class="login-wrapper">
        <form method="post" action="/uaa/authentication/form">
            <div class="header">开放API认证系统</div>
            <div class="form-wrapper">
                <input type="text" name="username" placeholder="登陆名" class="input-item">
                <input type="password" name="password" placeholder="密码" class="input-item">
                <input class="btn" name="submit" type="submit" value="提交">
            </div>
        </form>
    </div>
</div>
</body>

<script>

</script>
<style>
    * {
        padding: 0;
        margin: 0;
        font-family: 'Open Sans Light';
        letter-spacing: .05em;
    }

    html {
        height: 100%;
    }

    body {
        height: 100%;
    }

    .container {
        height: 100%;
        background-image: linear-gradient(to right, #5395f5, #97d9e1);
    }

    .login-wrapper {
        background-color: #fff;
        width: 450px;
        height: 500px;
        border-radius: 15px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 30px;
    }

    .login-wrapper .header {
        font-size: 30px;
        text-align: center;
        line-height: 200px;
    }

    .login-wrapper .form-wrapper .input-item {
        display: block;
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 20px;
        border: 0;
        padding: 10px;
        border-bottom: 1px solid rgb(128, 125, 125);
        font-size: 15px;
        outline: none;
    }

    .login-wrapper .form-wrapper .input-item::placeholder {
        text-transform: uppercase;
    }

    .login-wrapper .form-wrapper .btn {
        text-align: center;
        box-sizing: border-box;
        padding: 10px;
        width: 100%;
        margin-top: 40px;
        background-image: linear-gradient(to right, #97d9e1, #feada6);
        color: #fff;
        border: 1px solid #fff;
        border-radius: 3px;
    }

    .login-wrapper .msg {
        text-align: center;
        line-height: 80px;
    }

    .login-wrapper .msg a {
        text-decoration: none;
        color: #fbc2eb;
    }

</style>

</html>
